<template>
  <div class="main">
    <!-- 左侧 -->
    <div
      class="main__left left"
      :state="isOpenOptionsBar ? 'open' : 'hidden'"
    >
      <div class="left__nav flex-center">
        <div class="left__circle"></div>
        建筑饰面智能诊断系统
      </div>
      <div
        class="left__option flex-left hover:cursor-pointer"
        v-for="(option, index) in actionOptions"
        @click="handleClickActionOption(option)"
      >
        <el-icon
          color="#ffffff"
          size="20px"
          style="margin-left: 2rem; margin-right: 1.5rem"
        >
          <PieChart />
        </el-icon>
        {{ option.label }}
      </div>
    </div>
    <!-- 右侧 -->
    <div class="main__right right flex-center">
      <div class="right__nav flex">
        <div
          class="h-full flex-center"
          style="width: 5%"
        >
          <el-icon
            size="25"
            @click="isOpenOptionsBar = !isOpenOptionsBar"
            class="hover:cursor-pointer"
          >
            <Expand
              :style="{
                transform: `rotateZ(${isOpenOptionsBar ? 180 : 0}deg)`,
              }"
            />
          </el-icon>
        </div>
        <div
          class="h-full flex-right"
          style="width: 95%"
        >
          <div class="h-full w-1/5 flex-center">
            <div class="h-full w-1/5 flex-center">
              <el-icon size="20">
                <Search />
              </el-icon>
            </div>
            <div class="h-full w-1/5 flex-center">
              <el-icon size="20">
                <Bell />
              </el-icon>
            </div>
            <div class="h-full w-3/5 flex-center">
              <div
                class="w-10 h-10 flex-center"
                style="background-color: black"
              ></div>
              <div
                style="
                  margin: 1rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                用户名
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="right__content">
        <slot />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const actionOptions: {
  label: string;
  url: string;
}[] = [
  {
    label: "项目管理",
    url: "/project/",
  },
  {
    label: "用户管理",
    url: "/user/",
  },
  {
    label: "损伤设置",
    url: "/project/setting",
  },
];
const handleClickActionOption = async (option: {
  label: string;
  url: string;
}) => {
  await navigateTo(option.url);
};

const { width, height } = useWindowSize();

const isOpenOptionsBar = ref(true);
const isCanChangeOptionsBar = ref(true);

watch(width, (newWidth) => {
  if (newWidth >= 992) {
    isCanChangeOptionsBar.value = true;
  }

  if (isCanChangeOptionsBar.value && newWidth < 992) {
    isOpenOptionsBar.value = false;
  }
});

watch(isOpenOptionsBar, (newValue) => {
  if (isOpenOptionsBar.value) {
    isCanChangeOptionsBar.value = false;
    console.log("展开");
  }
});
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block(main) {
  @apply w-screen h-screen flex flex-row;

  @include element(left) {
    min-width: 300px;
    width: 40vw;
    max-width: 320px;
    background-color: #00152a;
    overflow: hidden;
    transition: all 0.3s ease-in-out;

    &[state="hidden"] {
      width: 0px;
      min-width: 0px;
      overflow: hidden;
    }

    &[state="open"] {
      width: 40vw;
      min-width: 300px;
    }
  }

  @include element(right) {
    flex: 1;
  }
}

@include block(left) {
  @include element(nav) {
    width: 100%;
    color: white;
    background-color: #002240;
    @apply text-xl p-4;
  }

  @include element(circle) {
    background-color: white;
    border-radius: 50%;
    margin-right: 1rem;
  }

  @include element(option) {
    width: 100%;
    height: 8%;
    display: flex;
    color: white;

    &:hover {
      background-color: black;
    }
  }
}

@include block(right) {
  flex-direction: column;

  @include element(nav) {
    width: 100%;
    height: 8%;
    min-width: 1000px;
    box-shadow: 2px 2px 0px 0px rgba(125, 122, 122, 0.1);
  }

  @include element(content) {
    width: 100%;
    height: 92%;
  }
}
</style>
